<template>
  <div class="app-container">
    <el-row :gutter="20" style="height: 100%">
      <!--组织数据-->
      <el-col :span="4" :xs="24" class="left-container">
        <div class="">
          <el-tree
            :data="treeData"
            :props="{ label: 'workProcedureName', children: 'children' }"
            :expand-on-click-node="false"
            ref="deptTreeRef"
            node-key="id"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="20" :xs="24" class="right-container">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane v-if="currentType === 'prod'" label="工艺流程" name="first">
            <el-button
              v-if="form.status !== '3'"
              v-hasPermi="['technology:processManage:design']"
              type="primary"
              @click="toDesign"
            >
              设计工艺流程
            </el-button>
            <designRouter :isStatic="true"></designRouter>
          </el-tab-pane>
          <el-tab-pane v-if="currentType !== 'prod'" label="BOM" name="BOM">
            <bom
              :processId="processId"
              :disabled="form.status == '3'"
              :processManageId="processManageId"
              :key="processId"
            ></bom>
          </el-tab-pane>
          <el-tab-pane label="任务模板" name="taskTemplate">
            <taskTemplate :processId="processId" :processManageId="processManageId"></taskTemplate>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Job">
import {
  // listProcessManage,
  getProcessManage,
  // addProcessManage,
  // updateProcessManage,
  // getRouteInfo,
  // delProcessManage,
  getSubProcessManage,
} from "@/api/technology/processManage";
import { useRoute, useRouter } from "vue-router";
import designRouter from "./design";
import bom from "./bom";
import taskTemplate from "./taskTemplate";
import { ref, reactive, onMounted, toRefs } from "vue";
const route = useRoute();
const router = useRouter();

const treeData = ref([]);
const activeName = ref("first");
const processManageId = ref("");
const processId = ref("");
const currentType = ref("prod");
const data = reactive({
  form: {},
});

const { form } = toRefs(data);

/** 修改按钮操作 */
function handleDetail() {
  getProcessManage(processManageId.value).then((response) => {
    form.value = response.data;

    getSubProcessManage({ processManageId: processManageId.value }).then((res) => {
      if (res.rows) {
        treeData.value = [
          {
            workProcedureName: form.value.productName + " (" + form.value.version + ")",
            value: form.value.id,
            type: "prod",
            children: res.rows,
          },
        ];
      } else {
        treeData.value = [
          {
            workProcedureName: form.value.productName + " (" + form.value.version + ")",
            type: "prod",
            value: form.value.id,
          },
        ];
      }
    });
  });
}

/** 节点单击事件 */
function handleNodeClick(data) {
  console.log(data);

  if (data.type === "prod") {
    activeName.value = "first";
    currentType.value = data.type;
  } else {
    processId.value = data.workProcedureId;
    activeName.value = "BOM";
    currentType.value = data.parentNo ? "subprocess" : "process";
  }
}
function toDesign() {
  router.push("/processManage/design/" + processManageId.value);
}
onMounted(() => {
  if (route.params && route.params.processId) {
    processManageId.value = route.params.processId;
  }
  handleDetail();
});
</script>
<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
}

.left-container {
  height: 100%;
  border-right: 1px solid #ddd;
}
</style>
